<div class="da-list-wrap">
  <div class="da-content-banner">
    <d-breadcrumb>
      <d-breadcrumb-item
        ><a routerLink="/">{{ 'list.breadcrumb.home' | translate }}</a></d-breadcrumb-item
      >
      <d-breadcrumb-item>{{ 'list.breadcrumb.formPage' | translate }}</d-breadcrumb-item>
      <d-breadcrumb-item>{{ 'list.breadcrumb.advanceList' | translate }}</d-breadcrumb-item>
    </d-breadcrumb>
    <div class="da-content-banner-title">
      {{ 'list.advanceList.title' | translate }}
    </div>
    <div>{{ 'list.advanceList.description' | translate }}</div>
  </div>
  <div class="da-content-wrapper">
    <da-layout-row [daGutter]="[24, 24]">
      <da-col-item [daSpan]="24" [daXs]="24">
        <div class="da-list-container">
          <div class="da-list-header">
            <div class="da-common-search">
              <div class="da-left">
                <d-search
                  [size]="'sm'"
                  (searchFn)="getList()"
                  [(ngModel)]="searchForm.keyword"
                  class="da-inline"
                  [placeholder]="'Search width First Name'"
                ></d-search>
              </div>
              <div class="da-right">
                <d-button (click)="batchDelete()" [disabled]="!deleteList.length" style="margin-left: 12px">Batch Delete</d-button>
              </div>
            </div>
          </div>
          <div class="da-list-content" dLoading [loading]="busy">
            <d-data-table
              [fixHeader]="true"
              [dataSource]="basicDataSource"
              [tableWidthConfig]="tableWidthConfig"
              [scrollable]="true"
              [lazy]="true"
              [fixHeader]="true"
              [maxHeight]="'600px'"
              (checkAllChange)="onCheckAllChange()"
              (loadMore)="loadMore()"
            >
              <thead dTableHead [checkable]="true">
                <tr dTableRow>
                  <th
                    dHeadCell
                    *ngFor="let colOption of dataTableOptions.columns"
                    [resizeEnabled]="true"
                    (resizeEndEvent)="onResize($event, 'title')"
                    [filterable]="colOption.filterable!"
                    [closeFilterWhenScroll]="true"
                    [filterList]="colOption.filterList!"
                    (filterChange)="onFirstFilterChange($event, colOption)"
                    [extraFilterTemplate]="extraFilterTemplate"
                  >
                    {{ colOption.header }}
                  </th>
                  <th dHeadCell>Actions</th>
                </tr>
              </thead>
              <tbody dTableBody>
                <ng-template let-rowItem="rowItem" let-rowIndex="rowIndex" let-nestedIndex="nestedIndex">
                  <tr dTableRow [ngClass]="{ 'da-table-row-selected': rowItem.$checked }">
                    <td dTableCell class="devui-checkable-cell">
                      <d-checkbox
                        [ngModelOptions]="{ standalone: true }"
                        (ngModelChange)="onRowCheckChange($event, rowIndex, nestedIndex, rowItem)"
                        [ngModel]="rowItem.$checked"
                        [halfchecked]="rowItem.$halfChecked"
                        [disabled]="rowItem.$checkDisabled"
                        dTooltip
                        [content]="rowItem.$checkBoxTips"
                        [position]="['top', 'right', 'bottom', 'left']"
                        [showAnimation]="false"
                      >
                      </d-checkbox>
                    </td>
                    <td
                      dTableCell
                      [editable]="true"
                      [editableTip]="editableTip"
                      [(editing)]="rowItem['idEdit']"
                      [rowItem]="rowItem"
                      [field]="'id'"
                      [beforeEditStart]="beforeEditStart"
                      [beforeEditEnd]="beforeEditEnd"
                    >
                      <span *ngIf="!rowItem['idEdit']">{{ rowItem?.id }}</span>
                      <div *ngIf="rowItem['idEdit']" class="edit-padding-fix">
                        <input class="devui-form-control" name="id" [(ngModel)]="rowItem.id" [attr.maxlength]="100" [attr.minlength]="3" />
                      </div>
                    </td>
                    <td
                      dTableCell
                      [editable]="true"
                      [editableTip]="editableTip"
                      [(editing)]="rowItem['titleEdit']"
                      [rowItem]="rowItem"
                      [field]="'title'"
                      [beforeEditStart]="beforeEditStart"
                      [beforeEditEnd]="beforeEditEnd"
                    >
                      <span *ngIf="!rowItem['titleEdit']"><d-tag [tag]="'Epic'" [labelStyle]="'epic'"></d-tag> {{ rowItem?.title }}</span>
                      <div *ngIf="rowItem['titleEdit']" class="edit-padding-fix">
                        <input
                          class="devui-form-control"
                          name="title"
                          [(ngModel)]="rowItem.title"
                          [attr.maxlength]="100"
                          [attr.minlength]="3"
                        />
                      </div>
                    </td>
                    <td
                      dTableCell
                      [editable]="true"
                      [editableTip]="editableTip"
                      [(editing)]="rowItem['priorityEdit']"
                      [rowItem]="rowItem"
                      [field]="'priority'"
                      [beforeEditStart]="beforeEditStart"
                      [beforeEditEnd]="beforeEditEnd"
                    >
                      <span *ngIf="!rowItem['priorityEdit']"
                        ><d-tag [tag]="rowItem?.priority" [labelStyle]="rowItem?.priority"></d-tag
                      ></span>
                      <div *ngIf="rowItem['priorityEdit']" class="edit-padding-fix">
                        <d-select name="priority" [(ngModel)]="rowItem.priority" [options]="priorities"></d-select>
                      </div>
                    </td>
                    <td
                      dTableCell
                      [editable]="true"
                      [editableTip]="editableTip"
                      [(editing)]="rowItem['iterationEdit']"
                      [rowItem]="rowItem"
                      [field]="'iteration'"
                      [beforeEditStart]="beforeEditStart"
                      [beforeEditEnd]="beforeEditEnd"
                    >
                      <span *ngIf="!rowItem['iterationEdit']">{{ rowItem?.iteration }}</span>
                      <div *ngIf="rowItem['iterationEdit']" class="edit-padding-fix">
                        <input dTextInput size="sm" [(ngModel)]="rowItem.iteration" />
                      </div>
                    </td>
                    <td
                      dTableCell
                      [editable]="true"
                      [editableTip]="editableTip"
                      [(editing)]="rowItem['assigneeEdit']"
                      [rowItem]="rowItem"
                      [field]="'assignee'"
                      [beforeEditStart]="beforeEditStart"
                      [beforeEditEnd]="beforeEditEnd"
                    >
                      <span *ngIf="!rowItem['assigneeEdit']">
                        <d-avatar [name]="rowItem.assignee" [width]="24" [height]="24"></d-avatar>
                        <span style="margin-left: 6px">{{ rowItem.assignee }}</span>
                      </span>
                      <div *ngIf="rowItem['assigneeEdit']" class="edit-padding-fix">
                        <input dTextInput size="sm" [(ngModel)]="rowItem.assignee" />
                      </div>
                    </td>
                    <td
                      dTableCell
                      [editable]="true"
                      [editableTip]="editableTip"
                      [(editing)]="rowItem['statusEdit']"
                      [rowItem]="rowItem"
                      [field]="'status'"
                      [beforeEditStart]="beforeEditStart"
                      [beforeEditEnd]="beforeEditEnd"
                    >
                      <span *ngIf="!rowItem['statusEdit']"
                        ><span [ngClass]="rowItem?.status.split(' ')[0]">{{ rowItem?.status || '--' }}</span></span
                      >
                      <div *ngIf="rowItem['statusEdit']" class="edit-padding-fix">
                        <d-select name="status" [(ngModel)]="rowItem.status" [options]="['Stuck', 'Done', 'Working on it']"></d-select>
                      </div>
                    </td>
                    <td dTableCell [editable]="true" [(editing)]="rowItem['dateEdit']">
                      <span *ngIf="!rowItem['dateEdit']">{{ rowItem?.timeline | i18nDate: 'short':false }}</span>
                      <form *ngIf="rowItem['dateEdit']" class="form-inline edit-padding-fix">
                        <div class="devui-form-group">
                          <div class="devui-input-group devui-dropdown-origin">
                            <input
                              class="devui-form-control search"
                              name="date"
                              [(ngModel)]="rowItem.timeline"
                              dDatepicker
                              appendToBody
                              #datePicker="datepicker"
                              [autoOpen]="true"
                              (ngModelChange)="onEditEnd(rowItem, 'dateEdit')"
                            />
                            <div class="devui-input-group-addon" (click)="datePicker.toggle()">
                              <i class="icon icon-calendar"></i>
                            </div>
                          </div>
                        </div>
                      </form>
                    </td>
                    <td>
                      <d-button icon="icon-delete" bsStyle="text-dark" title="delete" (click)="deleteRow(rowIndex)"></d-button>
                    </td>
                  </tr>
                </ng-template>
              </tbody>
            </d-data-table>
          </div>
        </div>
      </da-col-item>
    </da-layout-row>
  </div>
</div>

<ng-template #extraFilterTemplate let-checked="checked" let-halfChecked="halfChecked">
  <span>{{ checked ? 'All selected' : halfChecked ? 'Some selected' : ' None selected' }}</span>
</ng-template>
